<template>
	<!-- 记录筛选 -->
	<view>
		<view class="filter-box">
			<view class="filter-icon" @click="show = true"></view>
		</view>
		<u-action-sheet :show="show" @close="closeAction" title="筛选"
			:round="10">
			<view class="type-box">

				<view v-if="filterType.includes('scale')">
					<view class="title">考试规模</view>
					<view class="type-list">
						<view :class="[
							'type-item',
							scaleActive == item.typeId ? 'active' : ''
						]" v-for="item in scaleList" :key="item.typeId"
							@click="itemClick(item, 'scale')">
							{{ item.typeName }}
						</view>
					</view>
				</view>

				<view v-if="filterType.includes('type')">
					<view class="title">考试类型</view>
					<view class="type-list">
						<view :class="[
							'type-item',
							typeActive == item.id ? 'active' : ''
						]" v-for="item in typeList" :key="item.id"
							@click="itemClick(item, 'type')">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view v-if="filterType.includes('course')">
					<view class="title">考试科目</view>
					<view class="type-list">
						<view :class="[
							'type-item',
							courseActive == item.courseId ? 'active' : ''
						]" v-for="item in courseList" :key="item.courseId"
							@click="itemClick(item, 'course')">
							{{ item.courseName }}
						</view>
					</view>
				</view>

				<view v-if="filterType.includes('status')">
					<view class="title">发布状态</view>
					<view class="type-list">
						<view :class="[
							'type-item',
							statusActive === item.value ? 'active' : ''
						]" v-for="item in statusList" :key="item.value"
							@click="itemClick(item,  'status')">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="type-button">
					<view class="btn reset" @click="typeReset">重置</view>
					<view class="btn ok" @click="typeOk">确定</view>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import { getInfoTypeList } from '@/pages/achievement/static/js/getInfoTypeList.js';

	import { courseList } from '@/pages/achievement/api/common.js';

	import deepClone from "@/util/deepClone.js";

	export default {
		props: {
			filterType: {
				type: Array,
				default: () => (['scale', 'type', 'course',
					'status'
				]) // 规模，类型，科目，状态
			}
		},
		data() {
			return {
				show: false,
				scaleActive: '',
				scaleList: [],
				typeActive: '',
				typeList: [],
				courseActive: '',
				courseList: [],
				statusActive: '',
				statusList: [],
			};
		},
		created() {
			this.typeList = []

			if (this.filterType.includes('scale') || this.filterType.includes(
					'type')) {
				const { gradeInfo, classInfo } = this.$store.state
					.achievement;
				if (gradeInfo?.infoList.length > 0 && classInfo?.infoList.length >
					0) {
					this.typeList = [...this.typeList, ...gradeInfo.infoList, ...
						classInfo.infoList
					]

					this.scaleList = [gradeInfo.typeInfo, classInfo.typeInfo]
				} else {
					this.getTypeList()
				}
			}
			if (this.filterType.includes('course')) {
				this.getCourseList()
			}
			this.statusList = [
				{ name: '已发布', value: true },
				{ name: '未发布', value: false },
			]
		},
		methods: {
			async getTypeList() {
				const gradeInfo = await getInfoTypeList(
					'年级考试')
				const classInfo = await getInfoTypeList(
					'班级考试')
				// 类型列表
				this.typeList = [...this.typeList, ...gradeInfo?.infoList, ...
					classInfo?.infoList
				]
				//  规模列表
				this.scaleList = [gradeInfo.typeInfo, classInfo.typeInfo]
				console.log(this.scaleList)

				this.$store.commit('achievement/setGradeTaskType',
					gradeInfo)
				this.$store.commit('achievement/setClassTaskType',
					classInfo)
			},
			async getCourseList() {
				const data = await courseList()
				this.courseList = data?.data?.list
				this.$store.commit('homework/setCourseList', data?.data?.list)
			},
			// 选择类型
			itemClick(item, type) {
				console.log(type)
				switch (type) {
					case 'scale':
						this.scaleActive = item.typeId
						break;
					case 'type':
						this.typeActive = item.id
						break;
					case 'course':
						this.courseActive = item.courseId
						break;
					case 'status':
						this.statusActive = item.value
						break;
					default:
						break;
				}
			},
			// 筛选重置
			typeReset() {
				this.scaleActive = ''
				this.typeActive = ''
				this.courseActive = ''
				this.statusActive = ''
			},
			closeAction() {
				this['show'] = false
			},
			typeOk() {
				this.show = false
				// const list = deepClone(this.typeActive)
				// this.$emit('getFilterData', { typeIdList: list })
				let scaleActive = ''
				for (let item of this.scaleList) {
					if (item.typeId == this.scaleActive) {
						if (item.typeName == '年级考试') {
							scaleActive = 'grade'
						} else {
							scaleActive = 'class'
						}
						break
					}
				}
				this.$emit('getFilterData', {
					scaleActive: scaleActive,
					typeActive: this.typeActive,
					courseActive: this.courseActive,
					statusActive: this.statusActive,
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.filter-box {

		.filter-icon {
			width: 48rpx;
			height: 48rpx;
			background: url('@/pages/homework/static/img/filter.png') 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
<style lang="scss">
	.type-box {
		// min-height: 460rpx;
		padding: 20rpx 30rpx 150rpx;
		max-height: calc(100vh - 375rpx);
		overflow-y: scroll;

		.title {
			font-size: 30rpx;
			color: #999;
			text-align: left;
		}

		.type-list {
			padding: 24rpx 0 64rpx 0;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;


			.type-item {
				width: 214rpx;
				height: 68rpx;
				background: #f2f4f9;
				border: 1rpx solid #f2f4f9;
				border-radius: 40rpx;
				font-size: 26rpx;
				color: #333;
				line-height: 72rpx;
				text-align: center;
				margin: 0 13rpx 24rpx 0;

				&.active {
					background: rgba(66, 117, 253, 0.2);
					border: 1rpx solid #4275fd;
					color: #4275fd;
				}
			}
		}

		.type-button {
			position: fixed;
			left: 0;
			bottom: 30rpx;
			z-index: 10;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 98rpx;
			box-shadow: 0px -1rpx 0px 0px #e5e5e5;
			padding: 14rpx 30rpx 12rpx;
			background-color: #fff;

			.btn {
				width: 324rpx;
				height: 68rpx;
				border-radius: 34rpx;
				border: 1px solid #4174fd;
				font-size: 30rpx;
				line-height: 68rpx;
			}

			.reset {
				color: #4174fd;
			}

			.ok {
				background: #4174fd;
				color: #fff;
			}
		}
	}
</style>
